<template>
  <div class="component-icon-btn" style="height: 24px;">
    <div class="component-dropdown-group component-icon-btn-icon" style="float: left;" @click="handleBgColor">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <g fill="none" fill-rule="evenodd">
          <path d="M3.342 7h8.355l-3.762 4.356h-.952l-1.625-.915-2.781-2.936L3.342 7z" fill="#909AA9" />
          <path d="M13.496 11.481c.587 0 1.062-.49 1.062-1.095 0-.403-.354-1.1-1.062-2.092-.709.992-1.063 1.69-1.063 2.092 0 .605.476 1.095 1.063 1.095z"
            fill="#3D4757" />
          <path d="M8.467 2.11L2.889 7.538l4.205 3.83 5.213-5.481-3.84-3.777zm.705-.495l3.655 3.63a1 1 0 01.017 1.402l-5.056 5.262a1 1 0 01-1.401.04L2.462 8.305a1 1 0 01-.021-1.446l5.325-5.246a1 1 0 011.406.002z"
            fill="#3D4757" fill-rule="nonzero" />
          <path fill="#3D4757" d="M2 4h6v1H2z" />
        </g>
      </svg>
      <div class="component-icon-btn-color" :style="{backgroundColor:color}"></div>
    </div>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <div class="component-dropdown-btn" style="width: 10px;height: 24px;float: left;position: relative;">
          <div class="right-btn"></div>
        </div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item style="padding:0px;background:#fff">
          <div style="padding:0px 10px">
            <table>
              <tbody>
                <tr v-for="(arr,i) in colors" :key="i">
                  <td v-for="(color,j) in arr" :key="j" @click="changeColor(color)">
                    <div class="x-spreadsheet-color-palette-cell" :style="{backgroundColor:color}" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import {
    undoManager
  } from '../Utils.js'

  export default {
    name: 'BgcolorTool',
    props: {
      context: {
        type: Object,
        required: true
      }
    },
    data: function() {
      return {
        colors: [
          ['rgb(255, 255, 255)', 'rgb(0, 1, 0)', 'rgb(231, 229, 230)', 'rgb(68, 85, 105)', 'rgb(91, 156, 214)',
            'rgb(237, 125, 49)', 'rgb(165, 165, 165)', 'rgb(255, 192, 1)', 'rgb(67, 113, 198)', 'rgb(113, 174, 71)'
          ],
          ['rgb(242, 242, 242)', 'rgb(127, 127, 127)', 'rgb(208, 206, 207)', 'rgb(213, 220, 228)',
            'rgb(222, 234, 246)', 'rgb(252, 229, 213)', 'rgb(237, 237, 237)', 'rgb(255, 242, 205)',
            'rgb(217, 226, 243)', 'rgb(227, 239, 217)'
          ],
          ['rgb(216, 216, 216)', 'rgb(89, 89, 89)', 'rgb(175, 171, 172)', 'rgb(173, 184, 202)',
            'rgb(189, 215, 238)', 'rgb(247, 204, 172)', 'rgb(219, 219, 219)', 'rgb(255, 229, 154)',
            'rgb(179, 198, 231)', 'rgb(197, 224, 179)'
          ],
          ['rgb(191, 191, 191)', 'rgb(63, 63, 63)', 'rgb(117, 111, 111)', 'rgb(133, 150, 176)',
            'rgb(156, 194, 230)', 'rgb(244, 177, 132)', 'rgb(201, 201, 201)', 'rgb(254, 217, 100)',
            'rgb(142, 170, 218)', 'rgb(167, 208, 140)'
          ],
          ['rgb(165, 165, 165)', 'rgb(38, 38, 38)', 'rgb(58, 56, 57)', 'rgb(51, 63, 79)', 'rgb(46, 117, 181)',
            'rgb(196, 90, 16)', 'rgb(123, 123, 123)', 'rgb(191, 142, 1)', 'rgb(47, 85, 150)', 'rgb(83, 129, 54)'
          ],
          ['rgb(127, 127, 127)', 'rgb(12, 12, 12)', 'rgb(23, 21, 22)', 'rgb(34, 42, 53)', 'rgb(31, 78, 122)',
            'rgb(132, 60, 10)', 'rgb(82, 82, 82)', 'rgb(126, 96, 0)', 'rgb(32, 56, 100)', 'rgb(54, 86, 36)'
          ],
          ['rgb(192, 0, 0)', 'rgb(254, 0, 0)', 'rgb(253, 193, 1)', 'rgb(255, 255, 1)', 'rgb(147, 208, 81)',
            'rgb(0, 176, 78)', 'rgb(1, 176, 241)', 'rgb(1, 112, 193)', 'rgb(1, 32, 96)', 'rgb(112, 48, 160)'
          ]
        ],
        color: 'rgb(255, 255, 255)'
      }
    },
    mounted: function() {

    },
    methods: {
      handleBgColor() {
        const color = this.color.replace('rgb(', '').replace(')', '')
        const table = this.context.hot
        const selected = table.getSelected();
        if (!selected) {
          return;
        }

        let startRow = selected[0]
        let startCol = selected[1]
        let endRow = selected[2]
        let endCol = selected[3]
        let tmp = endRow;
        if (startRow > endRow) {
          endRow = startRow;
          startRow = tmp;
        }
        tmp = endCol;
        if (startCol > endCol) {
          endCol = startCol;
          startCol = tmp;
        }
        const _this = this
        let oldForecolorStyle = updateCellsBgcolorStyle(this.context, startRow, startCol, endRow, endCol, color)
        undoManager.add({
          redo: function() {
            oldForecolorStyle = updateCellsBgcolorStyle(_this.context, startRow, startCol, endRow, endCol, color)
          },
          undo: function() {
            for (let i = startRow; i <= endRow; i++) {
              for (let j = startCol; j <= endCol; j++) {
                let cellDef = _this.context.getCell(i, j);
                if (!cellDef) {
                  continue;
                }
                let cellStyle = cellDef.cellStyle
                let bgcolor = oldForecolorStyle[i + "," + j]
                cellStyle.bgcolor = bgcolor
              }
            }
            table.render();
          }
        });
      },
      changeColor(color) {
        this.color = color
        this.handleBgColor()
      }
    }
  }

  function updateCellsBgcolorStyle(context, startRow, startCol, endRow, endCol, color) {
    let hot = context.hot;
    const oldForecolorStyle = {};
    for (let i = startRow; i <= endRow; i++) {
      for (let j = startCol; j <= endCol; j++) {
        let td = hot.getCell(i, j);
        let cellDef = context.getCell(i, j);
        if (!cellDef) {
          continue;
        }
        let cellStyle = cellDef.cellStyle
        oldForecolorStyle[i + "," + j] = cellStyle.bgcolor || '255, 255, 255'
        cellStyle.bgcolor = color
      }
    }
    hot.render();
    return oldForecolorStyle;
  }
</script>

<style>
</style>
